<template>
    <div class="content">
        <!-- 证书 -->
        <div v-if="show==1" class="studyCard">
            <div class="card">
                <a :href="picurl" download="学习证明.jpg" title="点击下载"><img :src="picurl" alt="学习证书"></a>
            </div>
            <div class="download">
                <a :href="picurl" download="学习证明.jpg" title="点击下载">
                    下载
                </a>
            </div>
        </div>

        <!-- 无数据 -->
        <div v-if="show==2">
            <div style="margin:181px auto 0 auto;width: 160px;height: 163px;">
                <img src="../../assets/images/jilu.png" height="163" width="160"/>
            </div>
            <div style="text-align: center;margin-top:18px;font-size: 18px;color: #3B50A1">
                暂时还没有考试，抓紧时间复习吧！
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            show:'',//1是有数据 2是没数据
            picurl:''
        }
    },
    methods: {
        getStudyCard(){
           var id=this.$cookies.get('pcexam_id');
            this.$axios({
                url:'web/user/downStudyCard/'+id,
                method:'GET',
                responseType: "arraybuffer", //指定返回数据的格式
            }).then(res => {
                return 'data:image/png;base64,' + btoa(
                    new Uint8Array(res.data)
                    .reduce((data, byte) => data + String.fromCharCode(byte), '')
                ); //文件流转换
            }).then(data => {
                if(!data){
                    this.show=2
                }else {
                    this.picurl =data; //给图片赋值
                    this.show=1;
                }
            })
        }
    },
    mounted:function(){
        // 获取学习时间
        this.getStudyCard();
    }
}
</script>
<style scoped>
    .studyCard{
        position: relative;
        margin:0 auto;
        width:1080px;
    }
    .download{
        position: absolute;
        background-image: url(../../assets/images/dow.png);
        background-repeat: no-repeat;
        width: 50px;
        height: 60px;
        top: 7px;
        left: 220px;
        text-align: center;
        line-height: 50px;
    }
    .download a{
        color: #FFFFFF;
    }
    .card{
        margin: 38px auto;
        width: auto;
        height: 530px;
        text-align: center;
    }
</style>